<template>
	<view class="home-page">
		<!-- 顶部导航 -->
		<view class="sys-head" :style="{ height: sysHeight()+'px' }"></view>
		<u-navbar placeholder bgColor="#9a0405">
			<view class="navbar-title" slot="left">
				<view class="logo-section">
					<view class="logo">
						<image src="/static/logo.png" mode="aspectFit" class="logo-image"></image>
					</view>
					<text class="app-title">筷享生活</text>
				</view>
			</view>
		</u-navbar>
		<!-- <view class="top-nav">
			<view class="logo-section">
				<view class="logo">
					<image src="/static/logo.png" mode="aspectFit" class="logo-image"></image>
				</view>
				<text class="app-title">筷享生活</text>
			</view>
		</view> -->

		<!-- 主轮播图 -->
		<view class="hero-banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item style="width: 100%;height: 100%;" v-for="item in bannerList" >
					<view class="swiper-item">
						<image :src="item.picture" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 公告栏 -->
		<view class="announcement-bar" @click="toAnnouncementList">
			<u-notice-bar 
				:text="announcementText" 
				icon="volume"
				color="#dc0000"
				bgColor="#FFDEDE"
				:speed="100"
			></u-notice-bar>
		</view>

		<!-- 功能卡片 -->
		<view class="action-cards">
			<view class="card-item" @click="toOrder">
				<image src="https://shaanxikefeng.com/app/static/index/card1.png" mode="aspectFit" class="card-image"></image>
			</view>
			<view class="card-item" @click="toReservation">
				<image src="https://shaanxikefeng.com/app/static/index/card2.png" mode="aspectFit" class="card-image"></image>
			</view>
		</view>

		<!-- 积分广告 -->
		<view class="points-banner" @click="toad">
			<image src="https://shaanxikefeng.com/app/static/index/card3.png" mode="aspectFit" class="banner-image"></image>
		</view>
	</view>
</template>

<script>
import { getBannerList, getNoticeList } from '@/api/home.js'
import {wxLogin} from '@/api/login.js'
import {
		getUserInfo
	} from "@/api/user.js"

export default {
	data() {
		return {
			// 轮播图数据
			bannerList: [],
			// 公告内容
			announcementText: '公告: 内容内容内容内容内容内容内容内容内容内容内...'
		}
	},
	onLoad() {
		const usertoken = uni.getStorageSync('usertoken');
		if (usertoken) {
			// 页面加载逻辑
			this.loadBannerData()
			this.loadNoticeData()
		}else{
			//微信登录
			this.wxlogin()
		}
	},
	methods: {
		// 加载轮播图数据
		loadBannerData() {
			getBannerList({position:1}).then(res => {
				if (res.code == 200) {
					this.bannerList = res.data || this.bannerList
				}
			}).catch(err => {
				console.error('加载轮播图失败:', err)
			})
		},
		
		// 加载公告数据
		loadNoticeData() {
			getNoticeList({
				pageNo: 1,
				pageSize: 1
			}).then(res => {
				if (res.code == 200 && res.data.records && res.data.records.length > 0) {
					this.announcementText = res.data.records[0].title
				}
			}).catch(err => {
				console.error('加载公告失败:', err)
			})
		},
		//微信登录
		wxlogin() {
			uni.login({
				//成功放回
				success: (res) => {
					console.log(res);
					let code = res.code
					wxLogin({
						openCode: code
					}).then(res => {
						if(res.code==200){
							console.log(res,'++++++')
							let data=res.data
							this.$store.commit('setUserid', data.userId);
							this.$store.commit('setUsertoken', data.token);
							// 页面加载逻辑
							this.loadBannerData()
							this.loadNoticeData()
							this.getuserInfo(data.userId);
						}
						
						// this.openid=res.data.openid;
					})
				}
			})
		},
		//获取用户信息
		getuserInfo(userid) {
			getUserInfo({
				userId: userid
			}).then(res => {
				this.$store.commit('setUserinfo', res.data);
			})
		},
		// 轮播图切换事件
		onBannerChange(index) {
			console.log('轮播图切换到:', index)
		},
		
		// 跳转到点餐页面
		toOrder() {
			uni.switchTab({
				url: '/pages/cuisine/cuisine'
			})
		},
		
		// 跳转到预约页面
		toReservation() {
			uni.navigateTo({
				url: '/pagesA/reservation/reservation'
			})
		},
		
		// 跳转到公告列表页面
		toAnnouncementList() {
			uni.navigateTo({
				url: '/pagesB/announcement/announcement'
			})
		},
		toad(){
			uni.navigateTo({
				url: '/pagesB/videoad_play/videoad_play'
			})
			
		}
	}
}
</script>

<style lang="scss" scoped>
page{
	background-color: #FFEDED;
}
// 顶部导航
.sys-head{
	background-color: #9A0506;
}
.navbar-title{
	.logo-section {
		display: flex;
		align-items: center;
		gap: 16rpx;
		
		.logo {
			
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.logo-image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
		}
		
		.app-title {
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: 400;
			line-height: 0.9em;
		}
	}
}


// 主轮播图
.hero-banner {
	width: 100%;
	height: 570rpx;
	swiper{
		width: 100%;
		height: 100%;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
		image{
			width: 100%;
			height: 100%;
		}
	}
}

// 公告栏
.announcement-bar {
	height: 72rpx;
	background-color: #FFDEDE;
	margin: 0;
	padding: 0;
}

// 功能卡片
.action-cards {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 20rpx 30rpx 20rpx;
	background-color: #FFEDED;
	
	.card-item {
		width: 48%;
		height: 440rpx;
		
		.card-image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}
}

// 积分广告
.points-banner {
	width: 710rpx;
	height: 268rpx;
	margin: 0 20rpx;
	
	.banner-image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
}
</style>